<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #f0f1f1;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .top {
            height: 49px;
            background-color: #323232;
        }
        
        .top .img {
            float: left;
            width: 183px;
            height: 116px;
            /* position: fixed; */
            position: absolute;
            top: 0;
            /* overflow: hidden; */
        }
        
        .top ul {
            /* float: right; */
            width: 485px;
            height: 49px;
            /* background-color: pink; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            float: left;
            margin-left: 49px;
            /* overflow: hidden; */
            padding-left: 200px;
        }
        
        .top ul li {
            width: 87px;
            height: 49px;
            line-height: 49px;
            text-align: center;
            color: #817979;
        }
        
        .top ul li:hover {
            background-color: #dd4012;
        }
        
        .top ul li:hover a {
            color: white;
        }
        
        .top .top-con .first {
            background-color: #dd4012;
            color: white;
        }
        
        .top a {
            color: #817979;
        }
        
        .top-rt {
            width: 270px;
            height: 49px;
            float: right;
            line-height: 49px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .top-con {
            width: 1107px;
            height: 49px;
            margin: auto;
            /* background-color: pink; */
        }
        
        .middle {
            width: 1107px;
            height: 1635px;
            background-color: white;
            margin: auto;
            margin-top: 106px;
            margin-bottom: 40px;
        }
        
        .middle-con {
            width: 992px;
            height: 1635px;
            margin: auto;
            /* background-color: blanchedalmond; */
            overflow: hidden;
        }
        
        .middle-con h2 {
            margin-top: 60px;
        }
        
        .middle-con .p3 {
            width: 967px;
            margin-top: 24px;
            height: 70px;
            background-color: #f0f1f1;
            padding-left: 25px;
            /* line-height: 30px; */
            /* overflow: hidden; */
        }
        
        .banner {
            margin-top: 25px;
        }
        
        .t1 {
            margin-top: 30px;
            margin-bottom: 15px;
        }
        
        .t2,
        .t3,
        .t4,
        .t5,
        .t6,
        .t7 {
            margin-top: 23px;
            margin-bottom: 15px;
        }
        
        .p1,
        .p2 {
            margin-bottom: 15px;
        }
        
        .bottom li {
            margin-bottom: 10px;
        }
        /* p {
            line-height: 20px;
        } */
        
        .foot {
            height: 82px;
            background-color: #323232;
            overflow: hidden;
        }
        
        .foot-con {
            width: 1107px;
            height: 82px;
            /* background-color: paleturquoise; */
            margin: auto;
        }
        
        .foot-con .foot-lf {
            width: 164px;
            height: 82px;
            /* line-height: 82px; */
            float: left;
            /* background-color: plum; */
            display: flex;
            align-items: center;
        }
        
        .foot-con .foot-rt {
            width: 620px;
            height: 82px;
            float: right;
            /* background-color: peachpuff; */
        }
        
        .foot-con .foot-rt1 {
            width: 384px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            float: right;
            margin-top: 20px;
            margin-bottom: 10px;
            color: #999999;
        }
        
        .foot-con .foot-rt2 {
            width: 610px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            float: right;
            color: #666666;
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="top-con">
            <div class="img">
                <img src="img/logo.jpg" alt="">
            </div>

            <ul>
                <li><a href="index.html">网站首页</a></li>
                <li><a href="">传悦资源</a></li>
                <li class="first"><a href="" style="color: white;">传悦案例</a></li>
                <li><a href="">传悦服务</a></li>
                <li><a href="solution.html">解决方案</a></li>
                <li><a href="">需求提交</a></li>
            </ul>
            <div class="top-rt">
                <img src="img/tel.png" alt="" class="tel"><span style="color:#817979 ;">0535-606552189</span>
                <img src="img/qq.png" alt="" class="qq">
                <img src="img/wb.png" alt="" class="wb">
                <img src="img/wx.png" alt="" class="wx">
                <img src="img/email.png" alt="" class="email">
            </div>
        </div>
    </div>
    <div class="middle">
        <div class="middle-con">
            <h2></h2>
            <div class="p3"></div>
            <div class="banner">
                <img src="" alt="">
            </div>
            <h4 class="t1"></h4>
            <p class="p4"></p>
            <h4 class="t2"></h4>
            <p class="p5"></p>
            <h4 class="t3"></h4>
            <p class="p6"></p>
            <h4 class="t4"></h4>
            <p class="t6"></p>
            <p class="p1"></p>
            <p class="p7"></p>
            <p class="t7"></p>
            <p class="p2"></p>
            <p class="p8"></p>

            <ul class="bottom">
                <h4 class="t5"></h4>
                <li class="li1"></li>
                <li class="li2"></li>
                <li class="li3"></li>
                <li class="li4"></li>
                <li class="li5"></li>
                <li class="li6"></li>

            </ul>

        </div>
    </div>
    <div class="foot">
        <div class="foot-con">
            <div class="foot-lf">
                <img src="img/logo小.png" alt="">
            </div>
            <div class="foot-rt">
                <ul class="foot-rt1">
                    <li>关于传悦</li>
                    <li>新闻动态</li>
                    <li>传悦观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li>付款账户</li>
                </ul>
                <ul class="foot-rt2">
                    <li>Copyright 2013</li>
                    <li>创梦网络科技有限公司</li>
                    <li>传悦Chnyoo.cn All Rights Reserved</li>
                    <li>京ICP备12005221号</li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>
    String.prototype.parseUrl = function() {
        if (this.indexOf("?") === -1) {
            return {};
        }
        let result = {}
        this.slice(this.indexOf("?") + 1).split("&").forEach(item => {
            let arr = item.split("=");
            result[arr[0]] = arr[1]
        })
        return result;
    }

    let id = location.href.parseUrl().id;
    let http = new XMLHttpRequest()
    http.open("get", `http://10.35.164.15:81/casedetail?id=${id}`);
    http.send();
    http.onreadystatechange = function() {
        if (http.readyState === 4) {
            let List3 = JSON.parse(http.responseText)
            List3.forEach(function(item) {
                let h2 = document.querySelector("h2").innerHTML = item.h2;
                let img = document.querySelector(".banner img").src = item.img;
                let p3 = document.querySelector(".p3").innerHTML = item.p3;
                let t1 = document.querySelector(".t1").innerHTML = item.t1;
                let p4 = document.querySelector(".p4").innerHTML = item.p4;
                let t2 = document.querySelector(".t2").innerHTML = item.t2;
                let p5 = document.querySelector(".p5").innerHTML = item.p5;
                let t3 = document.querySelector(".t3").innerHTML = item.t3;
                let p6 = document.querySelector(".p6").innerHTML = item.p6;
                let t4 = document.querySelector(".t4").innerHTML = item.t4;
                let t6 = document.querySelector(".t6").innerHTML = item.t6;
                let p1 = document.querySelector(".p1").innerHTML = item.p1;
                let p7 = document.querySelector(".p7").innerHTML = item.p7;
                let t7 = document.querySelector(".t7").innerHTML = item.t7;
                let p2 = document.querySelector(".p2").innerHTML = item.p2;
                let p8 = document.querySelector(".p8").innerHTML = item.p8;
                let t5 = document.querySelector(".t5").innerHTML = item.t5;
                let li1 = document.querySelector(".li1").innerHTML = item.li1;
                let li2 = document.querySelector(".li2").innerHTML = item.li2;
                let li3 = document.querySelector(".li3").innerHTML = item.li3;
                let li4 = document.querySelector(".li4").innerHTML = item.li4;
                let li5 = document.querySelector(".li5").innerHTML = item.li5;
                let li6 = document.querySelector(".li6").innerHTML = item.li6;

            });
        }

    }
</script>

</html>